<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>06JS函数</title>
</head>
<body>
<button onclick="alert('警告框')">弹出警告框</button>
<button onclick="confirm('你确认要删除吗？')">弹出确认框</button>
<button onclick="prompt('请输入你的名字')">弹出输入框</button>
<script>
    //1.JS通过function关键字来定义函数
    function f1(){
        console.log("f1");
    }
    f1();
    //2.带参数的函数
    function f2(n){//形参
        console.log("f2函数"+n);
    }
    f2('今天中午吃什么');//实参
    f2(1);
    f2(false);

    function f3(x,y){
        console.log(x+y);
    }
    f3(1,2);//3
    f3(1);//1+undefined=NaN 如果实参个数小于形参个数，未被赋值的形参值为undefined
    f3(1,2,3);//1+2=3 如果实参个数大于形参个数，多余的实参被舍弃掉

    //4.arguments用来保存调用函数时传入的参数，可以看到参数的个数与具体的值
    function f4(){
        console.log(arguments);
    }
    f4(1,2,3);//Arguments(3)[1,2,3,...]
    f4(1);//Arguments[1,...]
    f4(1,2,3,4);//Arguments(4)[1,2,3,4,...]

    //5.函数的返回值
    function f5(a,b){
        return a+b;
    }
    console.log(f5(1,2));//直接打印调用f5函数时return的结果
    var r=f5(1,2);
    console.log(r);//将函数return的结果保存到r中，打印r

    //第二种函数声明的方式
    //将函数整体交给一个变量来保存，调用函数时直接使用该变量名调用
    var f6=function () {
        console.log("f6");
    }
    console.log(f6);//f(){console.log("f6");}
    console.log(typeof f6);//function
    f6();//f6

   //第三种函数声明方式，箭头函数
   const f7=(n)=>{
       console.log("箭头函数"+n);
   }
   f7('f7');//箭头函数f7
</script>
</body>
</html>